<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>环形图片旋转</title>
		<style>
			body,ul,li{margin:0;padding:0;}
			body{background: #000;perspective: 1200px;perspective-origin: center -200px;transform-style: preserve-3d;}
			.box{height: 200px;width: 1000px;margin:200px auto;transform-style: preserve-3d;}
			.box ul{position: relative;height: 200px;width: 133px;position: relative;transform-style: preserve-3d;
			border: solid 1px red;margin:auto;animation: run 8s linear infinite;}
			.box li{position: absolute;list-style: none; left:0;top:0;}
			.box li:nth-child(1){transform: rotateY(0deg)translateZ(-300px);}
			.box li:nth-child(2){transform: rotateY(36deg) translateZ(-300px);}
			.box li:nth-child(3){transform: rotateY(72deg) translateZ(-300px);}
			.box li:nth-child(4){transform: rotateY(108deg) translateZ(-300px);}
			.box li:nth-child(5){transform: rotateY(144deg) translateZ(-300px);}
			.box li:nth-child(6){transform: rotateY(180deg) translateZ(-300px);}
			.box li:nth-child(7){transform: rotateY(216deg) translateZ(-300px);}
			.box li:nth-child(8){transform: rotateY(252deg) translateZ(-300px);}
			.box li:nth-child(9){transform: rotateY(288deg) translateZ(-300px);}
			.box li:nth-child(10){transform: rotateY(324deg) translateZ(-300px);}
			@keyframes  run{
				0%{
					transform: rotateY(0deg);
				}
				100%{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="h">
			<div class="box">
				<ul>
					<li><img src="images/h1.jpg"/></li>
					<li><img src="images/h2.jpg" /></li>
					<li><img src="images/h3.jpg" /></li>
					<li><img src="images/h4.jpg" /></li>
					<li><img src="images/h5.jpg" /></li>
					<li><img src="images/h6.jpg" /></li>
					<li><img src="images/h7.jpg" /></li>
					<li><img src="images/h8.jpg" /></li>
					<li><img src="images/h7.jpg" /></li>
					<li><img src="images/h10.jpg" /></li>
				</ul>
			</div>
		</div>
	</body>
</html>
